/**
 * 目标1：默认显示-北京市天气
 *  1.1 获取北京市天气数据
 *  1.2 数据展示到页面
 */
// 获取并渲染城市天气函数
function getWeather(cityCode) {
  axios({
  	url: 'http://hmajax.itheima.net/api/weather',
    params: {
      city: cityCode
    }
  }).then(result => {
  	const dateObj = result.data;
  	console.log(dateObj)
  	// 顶部
	const titleStr = `<span class="dateShort">${dateObj.data.date}</span>
        <span class="calendar">农历&nbsp;
          <span class="dateLunar">${dateObj.data.dateLunar}</span>
        </span>`;
    document.querySelector('.title').innerHTML = titleStr;
    document.querySelector('.area').innerHTML = dateObj.data.area;
    
    // 当前天气
    const nowStr = `<div class="tem-box">
        <span class="temp">
          <span class="temperature">${dateObj.data.temperature}</span>
          <span>°</span>
        </span>
      </div>
      <div class="climate-box">
        <div class="air">
          <span class="psPm25">${dateObj.data.psPm25}</span>
          <span class="psPm25Level">${dateObj.data.psPm25Level}</span>
        </div>
        <ul class="weather-list">
          <li>
            <img src="${dateObj.data.weatherImg}" class="weatherImg" alt="">
            <span class="weather">${dateObj.data.weather}</span>
          </li>
          <li class="windDirection">${dateObj.data.windDirection}</li>
          <li class="windPower">${dateObj.data.windPower}</li>
        </ul>
      </div>`;
      document.querySelector('.weather-box').innerHTML = nowStr;
      
      // 当天气温
      const todayObj = result.data.data.todayWeather
      const todayStr = `<div class="range-box">
        <span>今天：</span>
        <span class="range">
          <span class="weather">${todayObj.weather}</span>
          <span class="temNight">${todayObj.temNight}</span>
          <span>-</span>
          <span class="temDay">${todayObj.temDay}</span>
          <span>℃</span>
        </span>
      </div>
      <ul class="sun-list">
        <li>
          <span>紫外线</span>
          <span class="ultraviolet">${todayObj.ultraviolet}</span>
        </li>
        <li>
          <span>湿度</span>
          <span class="humidity">${todayObj.humidity}</span>%
        </li>
        <li>
          <span>日出</span>
          <span class="sunriseTime">${todayObj.sunriseTime}</span>
        </li>
        <li>
          <span>日落</span>
          <span class="sunsetTime">${todayObj.sunsetTime}</span>
        </li>
      </ul>`;
      document.querySelector('.today-weather').innerHTML = todayStr;
      
      // 周天气预报
      const dayForecast = result.data.data.dayForecast
      const dayForecastStr = dayForecast.map(item => {
      	return `<li class="item">
          <div class="date-box">
            <span class="dateFormat">${item.dateFormat}</span>
            <span class="date">${item.date}</span>
          </div>
          <img src="${item.weatherImg}" alt="" class="weatherImg">
          <span class="weather">${item.weather}</span>
          <div class="temp">
            <span class="temNight">${item.temNight}</span>-
            <span class="temDay">${item.temDay}</span>
            <span>℃</span>
          </div>
          <div class="wind">
            <span class="windDirection">${item.windDirection}</span>
            <span class="windPower">${item.windPower}</span>
          </div>
        </li>`
      }).join('')
      document.querySelector('.week-wrap').innerHTML = dayForecastStr;
  }).catch(error => {
  	console.log(error)
  })
}

// 默认进入网页-就要获取天气数据（江门城市编码：'440700'）
getWeather('440700')

/**
 * 目标2：搜索城市列表
 *  2.1 绑定input事件，获取关键字
 *  2.2 获取展示城市列表数据
 */
// 2.1 绑定input事件，获取关键字
document.querySelector('.search-city').addEventListener('input', (e) => {
  axios({
  	url: 'http://hmajax.itheima.net/api/weather/city',
    params: {
      city: e.target.value
    }
  }).then(result => {
	    const inputData =  result.data.data
	    const inputStr = inputData.map( ele => {
	    	return `<li class="city-item" data-code='${ele.code}'>${ele.name}</li>`;
	    }).join('');
	    document.querySelector('.search-list').innerHTML = inputStr;
	})
})

/*<ul class="search-list">
            <li class="city-item">北京市</li>
          </ul>*/

/**
 * 目标3：切换城市天气
 *  3.1 绑定城市点击事件，获取城市code值
 *  3.2 调用获取并展示天气的函数
 */
// 3.1 绑定城市点击事件，获取城市code值
document.querySelector('.search-list').addEventListener('click', e => {
  if (e.target.classList.contains('city-item')) {
    // 只有点击城市li才会走这里
    const codeId = e.target.dataset.code
    getWeather(codeId)
  }
})